<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">报告预览</block>
			<block slot="right">
			</block>
		</cu-custom>
	</view>
</template>

<script>
	var wv;
	export default {
		data() {
			return {
				modalName: null,
				data: {}
			}
		},
		components: {},
		onShow() {
			this.data = uni.getStorageSync("AUDIT_DATA");
			uni.request({
				url: this.$http + '/biz/bizReport/print/' + this.data.reportId,
				header: {
					token: uni.getStorageSync("token")
				},
				method: 'POST',
				success: (res) => {
					if (res.statusCode == 200 && res.data.code == 0) {
						this.addView(res.data.url)
					} else {
						uni.showToast({
							icon: 'none',
							title: '操作失败，请重试！'
						});
					}
				},
				fail: function() {
					uni.showToast({
						icon: 'none',
						title: '服务器请求超时！'
					});
				}
			})
		},
		methods: {
			addView: function(url) {
				wv = plus.webview.create("", "custom-webview", {
					scalable: true,
					plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
					'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
					top: 88 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
				})
				wv.loadURL("http://preview.leonlims.com/onlinePreview?officePreviewType=pdf&url=" + url)
				var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
				currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
				setTimeout(function() {
					console.log(wv.getStyle())
				}, 1000); //如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
			}

		}
	}
</script>

<style lang="scss">
	// 多行合并表格
	$color:#e0e0e0;

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.flex-box {
		display: flex;
		flex-wrap: wrap;
	}


	.flex-box>.item-2 {
		flex: 0 0 50%;
	}

	.flex-box>.item-3 {
		flex: 0 0 33.3333%;
	}

	.title {
		margin: 20rpx 0;
		color: red;
	}

	.advance-area {
		.item-3 {
			font-size: 26rpx;
			border: 1rpx solid $color;
			border-width: 1rpx 1rpx 0 0;
			box-sizing: border-box;
			text-align: center;

			&:first-child {
				border-left-width: 1rpx;
			}

			&:last-child {
				border-right-width: 1rpx;
			}
		}

		.thead {
			.item-3 {
				font-weight: bold;
				padding: 16rpx 0;
				box-sizing: border-box;
			}
		}

		.table {
			&:last-child {
				border-bottom: 1rpx solid $color;
			}

			.item-3 {
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}
		}

		.table-flex {
			flex: 1;

			.item {
				border-bottom: 1rpx solid $color;
				padding: 10rpx 0;
				box-sizing: border-box;

				&:last-child {
					border-width: 0;
				}
			}
		}
	}

	button .cu-tag {
		position: absolute;
		top: 8upx;
		right: 8upx;
	}
</style>
